<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Flexbox Properties Example</title>
		<style>
			/* Flex 容器样式 */
			.container {
				display: flex;
				border: 2px solid #333;
				height: 200px;
				margin-bottom: 20px;
			}

			/* Flex 项目样式 */
			.item {
				background-color: #42b983;
				color: white;
				font-family: Arial, sans-serif;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 5px;
				padding: 10px;
			}

			/* 示例样式 */
			.grow-1 {
				flex-grow: 1;
			}

			.grow-2 {
				flex-grow: 2;
			}

			.shrink-0 {
				flex-shrink: 0;
			}

			.shrink-1 {
				flex-shrink: 1;
			}

			.basis-100 {
				flex-basis: 100px;
			}

			.basis-auto {
				flex-basis: auto;
			}

			.flex {
				flex: 1 1 100px;
			}

			.align-start {
				align-self: flex-start;
			}

			.align-end {
				align-self: flex-end;
			}

			.align-center {
				align-self: center;
			}

			.align-baseline {
				align-self: baseline;
			}

			.align-stretch {
				align-self: stretch;
			}
		</style>
	</head>
	<body>
		<h2>flex-grow 示例</h2>
		<div class="container">
			<div class="item grow-1">Grow 1</div>
			<div class="item grow-2">Grow 2</div>
		</div>

		<h2>flex-shrink 示例</h2>
		<div class="container" style="width: 204px">
			<div class="item shrink-0 basis-100">Shrink 0</div>
			<div class="item shrink-1 basis-100">Shrink 1</div>
		</div>

		<h2>flex-basis 示例</h2>
		<div class="container">
			<div class="item basis-100">Basis 100px</div>
			<div class="item basis-auto">Basis Auto</div>
		</div>

		<h2>flex 简写示例</h2>
		<div class="container">
			<div class="item flex">Flex: 1 1 100px</div>
			<div class="item">Default Flex</div>
		</div>

		<h2>align-self 示例</h2>
		<div class="container" style="height: 300px">
			<div class="item align-start">Align Start</div>
			<div class="item align-end">Align End</div>
			<div class="item align-center">Align Center</div>
			<div class="item align-baseline">Align Baseline</div>
			<div class="item align-stretch">Align Stretch</div>
		</div>
	</body>
</html>
